<template>
  <div>
    <nav class="mui-bar mui-bar-tab">
      <span
        v-for="(item, index) in tabList" 
        :key="index"
        :class="activePath==item.pathname?'mui-active':''"    
        class="mui-tab-item"
        @click.prevent="goPage(item.pathname)"
      >
        <span 
          v-if="item.pathname=='fhome'" 
          class="mui-icon mui-icon-home"/>
        <span 
          v-else-if="item.pathname=='fplay'" 
          class="mui-icon mui-icon-flag"/>
        <span 
          v-else 
          class="mui-icon mui-icon-contact"/>
        <span class="mui-tab-label">{{ item.name }}</span>
      </span>
    </nav>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tabList: [
        {
          name: '首页',
          pathname: 'fhome'
        },
        {
          name: '活动',
          pathname: 'fplay'
        },
        {
          name: '我的',
          pathname: 'fmine'
        }
      ]
    }
  },
  computed: {
    activePath() {
      return this.$route.name
    }
  },
  methods: {
    goPage(pathname) {
      this.$router.push({ name: pathname })
    }
  }
}
</script>

<style>
</style>
